<template>
    <div>
        <div id="topTitle" >
            <h1>愿半生编码，如一生老友！</h1>
            <p class="underline"></p>
            <p>/* 这里有你感兴趣的 */</p>
            <input type="text" name="" id="" v-model="searchval" placeholder="search" @keyup.enter="searchenter()" @mousemove='searchmov' @mouseout='searchout' @click="searchclick" :style="{width:searchwidth}">
            <div style="clear: both;"></div>
        </div>
        <div id="scrollDown">
            <span class="scrollDownicon" @click='scrollclick'></span>
        </div>
    </div>
</template>
<script>
import $ from 'jquery'
export default {
    data() {
    return {
        searchflag:1,
        searchwidth:'230px',
        searchbackgroundColor:'rgba(255,255,255,.25)',
        searchval:'',
        
    }
  },
  methods: {
    searchmov() {
      if(this.searchflag){
          this.searchwidth='400px'
          this.searchbackgroundColor='rgba(255,255,255,.55)'
      }
      
    },
    searchout(){
      if(this.searchflag){
          this.searchwidth='230px'
          this.searchbackgroundColor='rgba(255,255,255,.25)'
      }
    },
    searchclick(){
        this.searchwidth='400px'
        this.searchbackgroundColor='rgba(255,255,255,.25)'
        this.searchflag=0
    },
    searchunclick(){

    },
    scrollclick(){
        let distance = document.documentElement.clientHeight;
        // document.documentElement.scrollTop=distance
        $('html,body').animate({scrollTop:distance+'px'});
    },
    searchenter(){
        this.$router.push({name: "searchs",query: {searchval:this.searchval}});
    }
  }


}
</script>
<style>
    #topTitle{
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-90%);
            text-align: center;
        }
        #topTitle h1{
            width: 1000px;
            font-family: microsoft yahei;
            font-weight: 400;
            font-size: 65px;
            color: #fff;
            cursor: Default;
        }
        .underline {
            position: relative;
            left:50%;
            transform: translate(-50%,0);
            margin-top: 20px;
            width: 70px;
            border-bottom: 4px solid rgb(67,149,255);
            margin-bottom: 50px;
        }
        #topTitle p{
            color: white;
            text-align: center;
        }
        #topTitle input{
            position: absolute;
            top: 300px;
            left: 50%;
            width: 230px;
            transform: translate(-50%,0);
            outline: none;
            border: none;
            padding: 13px 15px;
            border-radius: 30px;
            color: rgba(255,255,255,.8);
            font-size: small;
            font-weight: 400;
            font-family: microsoft yahei,sans-serif;
            text-align: center;
            background-color:rgba(255,255,255,.25);
            box-shadow: rgba(0,0,0,.2) 0 0 10px;
            transition:width 0.5s,color 0.5s;
        }
        
        #scrollDown{
            position: absolute;
            top:100%;
            left: 50%;
            transform: translate(0,-50%);
            margin-top: -80px;
        }
        #scrollDown .scrollDownicon{
            /* position: relative;
            left: 50%;
            margin-left: -10px;
            margin-top: 30px; */
            display:block;
            border-right: 3px solid rgba(255,255,255,.5);
            border-top: 3px solid rgba(255,255,255,.5);
            height: 20px;
            width: 21px;
            transform: rotate(135deg);
            cursor: pointer;
        }
</style>
